<template>
	<!-- 比分 -->
	<view class="yc-data-checkbox">
		<view class="checkbox ">
			<view class="box">
				<view class="box" v-if="noshowgame(2,'bf')">
					<view class="buttonboxx" v-show="popupNumer === 0" @click="openpopup">
						<text class="button" style="color: #ff0000; ">点击选择比分</text>
					</view>
					<view class="buttonboxx" v-show="popupNumer > 0" @click="openpopup">
						<text class="button" style="color: #ff0000; ">已选择{{popupNumer}}项</text>
					</view>
				</view>
				<view v-else class="check" style="flex: 1;">
					<view style="color: #999999;">未开售</view>
				</view>
			</view>
			<uni-popup ref="crspopup" type="bottom" >
				<crscheck 
					:fixSelectData="fixSelectData" 
					:styledata="styledata" 
					@closeupup="closeupup" 
					@getfixSelectData="change">
				</crscheck>
			</uni-popup>
		</view>
	</view>
</template>


<script>
import date from "/common/getdatetime.js";
import crscheck from "@/components/main/bet/jczq/crs-checkupup.vue";

export default {
  name: 'crscheckbox', // 你的组件名称
  components: {
    crscheck // 注册子组件
  },
  props: {
    Refresh: Boolean,
    fixSelectData: Object
  },
  data() {
    return {
      styledata: {}, // 字典
      temporaryArr: '', // 临时存储数据
      popupNumer: 0, // 弹窗数量
      deleteId: this.fixSelectData.id // 删除 ID
    };
  },
  created() {
    this.init(); // 创建初始化
  },
  watch: {
    Refresh(oldVal, newVal) {
      this.init();
    }
  },
  methods: {
    init() {
      this.temporaryArr = '';
      this.popupNumer = 0;
      const arr = {
        bf: {
          style: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          res: [
            '1:0', '2:0', '2:1', '3:0',
            '3:1', '3:2', '4:0', '4:1',
            '4:2', '5:0', '5:1', '5:2',
            '胜其它',
            '0:0', '1:1', '2:2', '3:3',
            '平其它',
            '0:1', '0:2', '1:2', '0:3',
            '1:3', '2:3', '0:4', '1:4',
            '2:4', '0:5', '1:5', '2:5',
            '负其它'
          ]
        }
      };
      this.styledata = arr;
    },
    change(game, index, gameId) {
      const array = {
        awayTeamAbbName: this.fixSelectData.short_away,
        homeTeamAbbName: this.fixSelectData.short_home,
        matchId: this.fixSelectData.id,
        leagueAbbName: this.fixSelectData.short_comp,
        matchNumStr: this.fixSelectData.issue_num,
        gameDeadline: date.getNowFormatDate(0, this.fixSelectData.match_time * 1000),
        orderDeadline: '',
        sort: this.fixSelectData.match_time,
        data: [{
          res: this.styledata[game].res[index],
          rate: this.fixSelectData[game][index],
          poolEs: Number(this.noshowdan(gameId)),
          gameState: game
        }],
      };

      if (this.styledata[game].style[index] === 0) { // 添加
        this.styledata[game].style[index] = 1;
        if (this.temporaryArr === '') { // 如果是第一次选择直接添加进去
          const ojb = {
            gameData: array,
            selectBoole: true, // 判断是否取消整场比赛
          };
          this.temporaryArr = ojb;
        } else { // 否则只添加玩法进去
          this.temporaryArr.selectBoole = true;
          const newOjd = {
            res: this.styledata[game].res[index],
            rate: this.fixSelectData[game][index],
            poolEs: Number(this.noshowdan(gameId)),
            gameState: game
          };
          this.temporaryArr.gameData.data.push(newOjd);
        }
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
        this.popupNumer++;
      } else { // 删除
        this.styledata[game].style[index] = 0;
        if (this.temporaryArr.gameData.data.length === 1) { // 当只有一个的情况下直接全部删除
          array.data = []; // 清空已选择玩法
          const ojb = {
            gameData: array,
            selectBoole: false,
          };
          this.temporaryArr = ojb;
        } else { // 否则删除取消选择用户点击的玩法
          const Delindex = this.temporaryArr.gameData.data.findIndex(item => item.res === this.styledata[game].res[index]);
          this.temporaryArr.gameData.data.splice(Delindex, 1);
        }
        this.$emit('getSelectList', this.temporaryArr); // 最后把处理好的数据发给父页面
        this.popupNumer--;
      }
    },
    noshowdan(id) {
      id = String(id);
      const res = this.fixSelectData.sell_status[id];
      if (res === '2' || id === '2') {
        return true;
      } else {
        return false;
      }
    },
    noshowgame(id, gameType) {
      const res = this.fixSelectData.sell_status[id];
      if (res === '1' || res === '2' || this.fixSelectData[gameType].length > 1 || this.fixSelectData[gameType]['goalLine']) {
        return true;
      } else {
        return false;
      }
    },
    openpopup() {
      this.$refs.crspopup.open('bottom');
    },
    closeupup() {
      this.$refs.crspopup.close('bottom');
    }
  }
};
</script>

<style>
	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}



	.check {
		flex: 1;

		display: flex;
		justify-content: center;
		align-items: center;



		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		margin: 1px;
		font-size: 20rpx;

		text-align: center;
	}

	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>
